<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String cpath = request.getContextPath();
	request.setAttribute("cpath", cpath);
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="CACHE-CONTROL" CONTENT="NO-CACHE" />
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<script type="text/javascript">
	var cxpath = '${cxpath}';
</script>
<script src="${cpath}/js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${cpath}/js/action/actionUtils.js"></script>
<script type="text/javascript" src="${cpath}/js/action/userManage.js"></script>
<script type="text/javascript" src="${cpath}/js/action/chatSessionManage.js"></script>
<link rel="stylesheet" href="${cpath}/css/bootstrap-2.3.2.min.css" media="all" type="text/css" />
<link rel="stylesheet" href="${cpath}/css/jquery-ui-1.10.3.css" media="all" type="text/css" />
<link rel="stylesheet" href="${cpath}/css/sprite.css" media="all" type="text/css" />
<link rel="stylesheet" href="${cpath}/css/freechat.css" media="all" type="text/css" />
<script src="${cpath}/js/bootstrap-3.3.6.min.js" type="text/javascript"></script>
<script src="${cpath}/js/Math.uuid.js" type="text/javascript"></script>
<script src="${cpath}/js/freechat.js" type="text/javascript"></script>
<title>FreeChat</title>
</head>
<body>
	<div id="main_wrapper">
		<div class="overlay"></div>
		<div id="chat" class="row-fluid clearfix">
			
			<div id="middle_wrapper">
				<div class="edit_profile_header" id="edit_profile_header_main">
					<div class="edit_profile_title">编辑资料</div>			
					<div id="edit_profile_main_back">保存</div>
				</div>
				<div id="edit_profile_tags_view">
					<div class="edit_profile_header">
						<div class="edit_profile_title">编辑资料</div>
						<div class="edit_profile_back" id="edit_profile_tags_back"></div>
					</div>
					<div id="edit_profile_tags_current">
						<c:forEach items="${userInfo.interestsArr}" var="inter">
							<div class="left_profile_tag">
								<span class="left_profile_tag_text">#${inter}</span>
								<span class="left_profile_tag_icon"></span>
							</div>
						</c:forEach>
					</div>
					<div id="edit_profile_tags_edit">
						<input type="text" id="edit_profile_tags_input" maxlength="40" placeholder="在此输入标签" />
					</div>
					<div id="edit_profile_tags_suggestion">Suggestion</div>
					<ul id="edit_profile_tags_list">
						<c:forEach items="${tags}" var="tag">
							<li class="profile_tag_element left_profile_tag">#${tag}</li>
						</c:forEach>
					</ul>
				</div>
				<div id="new-button-wrapper">
					<div id="newTextChat">文字聊天</div>
				</div>
				<div id="left_profile_wrapper">
					<div id="left_profile_top">
						<div id="left_profile_avatar_wrapper">
							<c:choose>
								<c:when test="${userInfo.id == 'team'}">
									<div id="teamFreeChat" style="display: block;"></div>
								</c:when>
								<c:otherwise>
									<div class="left_profile_color avatar-sprite sprite-Avatar-Base-${userInfo.avatarColor}-56_2x"></div>
									<div class="left_profile_avatar avatar-sprite sprite-Avatar-Icon-${userInfo.avatarIcon}-56_2x"></div>
								</c:otherwise>
							</c:choose>
							
						</div>
						<div id="left_profile_top_right">
							<input type="text" id="left_profile_display_input" placeholder="输入昵称" maxlength="20" value="${userInfo.nickName}" />
							<div id="left_profile_display">${empty userInfo.nickName ? userInfo.avatarIconName : userInfo.nickName}</div>
							<div id="left_profile_username">@${userInfo.userName}</div>
						</div>
					</div>
					<div id="toggle-profile">编辑资料</div>
					<div id="edit-profile-section">
						<div id="left_profile_middle_wrapper">
							<div id="left_profile_middle">
								<div id="profile_about_title_wrapper">
									<span id="profile_about_title">简历</span>
									<span id="profile_about_title_icon" class="pencil-icon"></span>
								</div>
								<div id="left_profile_about">${userInfo.introduction}</div>
								<textarea id="left_profile_about_textbox" value placeholder="介绍您自己" maxlength="140" value="${userInfo.introduction}"></textarea>
							</div>
						</div>
						<div id="left_profile_bottom_wrapper">
							<div id="left_profile_bottom" class="clearfix">
								<div id="profile_interests_title">
									<span id="profile_interests_title_text">兴趣</span>
									<span id="profile_interests_title_icon" class="pencil-icon"></span>
								</div>
								<c:forEach items="${userInfo.interestsArr}" var="inter">
									<div class="left_profile_tag">
										<span class="left_profile_tag_text">#${inter}</span>
									</div>
								</c:forEach>
								<!-- <div class="left_profile_tag">
									<span class="left_profile_tag_text">#跳舞</span>
								</div>
								<div class="left_profile_tag">
									<span class="left_profile_tag_text">#读书</span>
								</div> -->
							</div>
						</div>
						<div id="edit_profile_gender_wrapper">
							<div id="edit_profile_gender" class="clearfix">
								<div id="edit_profile_gender_title">性别</div>
								<div id="edit_profile_male">
									<span id="edit_profile_male_icon"></span>
									<span class="edit_profile_gender_text ${userInfo.gender == 1 ? 'edit_profile_gender_active' : ''}">男</span>
								</div>
								<div id="edit_profile_female">
									<span id="edit_profile_female_icon"></span>
									<span class="edit_profile_gender_text ${userInfo.gender == 2 ? 'edit_profile_gender_active' : ''}">女</span>
								</div>
							</div>
						</div>
						<div id="edit_profile_age_overall_wrapper">
							<div id="edit_profile_age">
								<div id="edit_profile_age_wrapper" class="clearfix">
									<div id="profile-error-message"></div>
									<div id="edit_profile_age_label">年龄</div>
									<input class="profile-field" id="profile-age" placeholder="Age" maxlength="2" value="${userInfo.age == 0 ? '' : userInfo.age}" />
								</div>
							</div>
						</div>	
						<div id="edit_profile_location_wrapper">
							<div id="edit_profile_location" class="clearfix">
								<div id="edit_profile_location_div">
									<span id="profile-location-label">分享位置</span>
								</div>
								<div id="profile-location-wrapper">
									<c:choose>
										<c:when test="${!empty userInfo.location}">
											<span id="profile-location-icon" class="location-icon-on"></span>
											<span id="profile-location-text" class="location-text-on">ON</span>
										</c:when>
										<c:otherwise>
											<span id="profile-location-icon" class="location-icon-off"></span>
											<span id="profile-location-text" class="location-text-off">OFF</span>
										</c:otherwise>
									</c:choose>
								</div>
							</div>
						</div>
						<div id="settings_toggle_box" class="dropdown-toggle" data-toggle="dropdown">
							<div id="settings_toggle" href="#"></div>
						</div>
						<c:if test="${userInfo.registered == 0}">
							<div id="create_div_wrapper" data-toggle="modal" data-target="#create-account-modal">创建账户</div>
						</c:if>
						<ul class="dropdown-menu settings-menu" role="menu">
							<li><a href="#" class="dropdown-element" id="dropdown-edit-username">编辑用户名</a></li>
							<li><a href="#" class="dropdown-element" id="dropdown-reset-password">重置密码</a></li>
							<li><a href="#" class="dropdown-element" id="logout-button">退出</a></li>
						</ul>
					</div>
				</div>
<!-- 				<div id="tags_view_wrapper"></div> -->
				<div id="profile_chat_section">
					<div id="global_search_wrapper">
						<input type="text" maxlength="40" id="global_search" 
							class="profile-field" placeholder="搜索用户或聊天" />
					</div>
					<div id="convo-sorter">
						<div id="all-sort" class="sort-div active-sort-div">所有 (<span>${allConvosCount}</span>)</div>
						<div id="friends-sort" class="sort-div">朋友 (<span>${friendConvosCount}</span>)</div>
						<div id="online-sort" class="sort-div">在线 (<span>${onlineConvosCount}</span>)</div>
					</div>
					<div id="conversation-sidebar" class="span2">
						<div id="conversation-list-wrapper">
							<ul id="conversation-list">
								<!-- <li class="convo-div search-div disconnected-name" id="search-add-tag">
									<span class="list_name">
										开始关于
										<span class="search-text-element">#d</span>
									</span>
								</li>
								<li class="convo-div search-div disconnected-name" id="search-add-by-username">
									<span class="list_name">
										通过用户名添加
										<span class="search-text-element">@d</span>
									</span>
								</li> -->
								<!-- <li class="convo-div waiting-div disconnected-name" id="waiting1">
									<span class="list_name">等待...</span>
								</li> -->
								<c:forEach items="${allConvos}" var="convo" varStatus="status">
									<c:choose>
										<c:when test="${empty convo.partnerId}">
											<li class="convo-div waiting-div disconnected-name ${status.first ? 'selected-convo' : ''}" id="${convo.id}">
												<div class="tags_waiting_div">
													<span class="list_name tags_waiting_span">等待...</span>
													<span class="tags_waiting_tags"></span>
												</div>
												<span class="dequeue-button" id="x_discon">x</span>
											</li>
										</c:when>
										<c:when test="${convo.partnerId == 'team'}">
											<li class="convo-div conversation team_freechat ${status.first ? 'selected-convo' : ''}" id="${convo.id}">
												<div class="team_freechat_icon"></div>
												<div class="partnerRightFreechat">
													<span class="list_name" id="name_${convo.id}">${convo.partnerNickName}</span>
													<span class="status ${convo.partnerStatus == 0 ? 'offline' : 'online'}"></span>
													<span class="last_timestamp">${convo.lastMsgTime}</span>
													<span class="unread-messages">${convo.unreadMessages == 0 ? '' : convo.unreadMessages}</span>
													<c:choose>
														<c:when test="${!empty convo.lastMessage}">
															<div class="last_message_wrapper ${convo.userId == convo.lastMessage.senderId ? 'mw-right-last' : 'mw-left-last'}">
																<div class="last_message">
																	<c:choose>
																		<c:when test="${convo.lastMessage.msgType == 2}">
																			${convo.lastMessage.senderId != convo.userId ? '接收到一张图片' : '你发送了一张图片'}		
																		</c:when>
																		<c:otherwise>
																			${convo.lastMessage.content}
																		</c:otherwise>
																	</c:choose>
																</div>
															</div>
														</c:when>
														<c:otherwise>
															<div class="last_message_wrapper">
																<div class="last_message"></div>
															</div>
														</c:otherwise>
													</c:choose>
												</div>
											</li>
										</c:when>
										<c:otherwise>
											<li class="convo-div conversation ${convo.type == 2 ? 'friends' : 'normal'} ${status.first ? 'selected-convo' : ''}" id = "${convo.id}">
												<div class="partnerAvatarSmall">
													<div class="partnerAvatarColorSmall avatar-sprite sprite-Avatar-Base-${convo.partner.avatarColor}-42_2x"></div>
													<div class="partnerAvatarIconSmall avatar-sprite sprite-Avatar-Icon-${convo.partner.avatarIcon}-42_2x"></div>
												</div>
												<c:if test="${convo.type == 2}">
													<div class="conversationStar"></div>
												</c:if>
												<div class="partnerRight">
													<span class="list_name" id = "name_${convo.id}" title="${convo.type == 2 ? '双击编辑' : ''}">${convo.partnerNickName}</span>
													<span class="status ${convo.partnerStatus == 0 ? 'offline' : 'online'}"></span>
													<span class="last_timestamp">${convo.lastMsgTime}</span>
													<span class="unread-messages">${convo.unreadMessages == 0 ? '' : convo.unreadMessages}</span>
													<c:choose>
														<c:when test="${!empty convo.lastMessage}">
															<div class="last_message_wrapper ${convo.userId == convo.lastMessage.senderId ? 'mw-right-last' : 'mw-left-last'}">
																<div class="last_message">
																	<c:choose>
																		<c:when test="${convo.lastMessage.msgType == 2}">
																			${convo.lastMessage.senderId != convo.userId ? '接收到一张图片' : '你发送了一张图片'}		
																		</c:when>
																		<c:otherwise>
																			${convo.lastMessage.content}
																		</c:otherwise>
																	</c:choose>
																</div>
															</div>
														</c:when>
														<c:otherwise>
															<div class="last_message_wrapper">
																<div class="last_message"></div>
															</div>
														</c:otherwise>
													</c:choose>
												</div>
											</li>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</ul>
						</div>
					</div>
				</div>
				<audio id="alertSound"></audio>
			</div>
			<div id="right_wrapper">
				<div id="waiting-tags-screen">等待...</div>
				<div id="partner-header">
					<div id="partner-header-center" class="clearfix">
						<div id="teamFreeChatAvatar" style="display: none;"></div>
						<div id="partnerHeaderAvatar">
							<div class="partnerHeaderColor avatar-sprite"></div>
							<div class="partnerHeaderIcon avatar-sprite"></div>
						</div>
						<div id="partner-name-wrapper">
							<div id="partner-name" style="bottom: 0px;"></div>
							<div id="partner-name-view">隐藏资料</div>
						</div>
					</div>
					<div id="partner-icon-wrapper">
						<div id="new-button" class="partner-icon" href="#">
							<div class="partner-icon-image sprite"
								id="end-button-image"></div>
							<div class="label-icon"></div>
						</div>
					</div>
				</div>
				<div id="partner-business-card" class="clearfix">
					<div id="partner-info-top" class="clearfix">
						<div id="partner-age-gender-wrapper" class="clearfix">
							<div id="partner-age-wrapper">
								<div id="partner-age-picture"></div>
								<div id="partner-age"></div>
							</div>
							<div id="partner-gender-wrapper">
								<div id="partner-gender-picture"></div>
								<div id="partner-gender"></div>
							</div>
							<div id="partner-location-wrapper" class="clearfix"
								style="display: none;">
								<div id="partner-location-picture"></div>
								<div id="partner-location"></div>
							</div>
						</div>
					</div>
					<div id="partner-info-temp">
						<div id="partner-queue-name" style="display: none;"></div>
						<div id="waiting_tags"></div>
					</div>
					<div id="partner-info-middle" class="clearfix">
						<div id="partner-info-spacer">
							<div id="partner-about-me">
								<div id="about-me"></div>
							</div>
							<div id="partner-tags">
								<!-- <div class="partner_profile_tag">#电影</div>
								<div class="partner_profile_tag">#编程</div> -->
							</div>
						</div>
					</div>
					<div id="add-friend-wrapper">
						<div id="add-friend-button"  href="#">
							<div class="sprite sprite-icon-add-friend_blue partner-icon-image"
								id="add-friend-button-image"></div>
							<div class="label-icon">添加朋友</div>
						</div>
					</div>
				</div>
				<div id="chat-area-wrapper">
					<div id="loading-wrapper">
						<div id="loading_ie"></div>
						<div class="spinner-wrapper">
							<ul class="spinner">
								<li></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</div>
						<div id="online-count-waiting">
							现在有 
							<b></b>
							人在线...
						</div>
					</div>
					<div id="chat-area" class="clearfix">
					</div>
					<div id="media_button_wrapper">
						<a href="#" id="media_button" class="plus"></a>
					</div>
					<div id="message-input-wrapper">
						<div id="message-input-background">
							<input type="text" id="message-input" placeholder="输入信息"
								max-length="2048" />
						</div>
						<button class="btn btn-large" id="send-button">发送</button>
					</div>
				</div>
				<div id="friendRequest">
					<h4 id="friend-request-header">添加朋友请求</h4>
					<div id="accept-reject-wrapper" class="clearfix">
						<div role='button' data-toggle='modal' href="#create-modal" id="acceptFriend" class = 'btn btn-large btn-block'>
							<span id="accept-friend-label">接受</span>
							<i class="fui-checkmark-24" id="add-friend-icon"></i>
						</div>
						<div id="rejectFriend" class="btn btn-large btn-block btn-danger">
							<span id="reject-friend-label">拒接</span>
							<i class="fui-cross-24" id="reject-friend-icon"></i>
						</div>
					</div>
				</div>
				<div id="set-friend-name">
					<h4>你想要设置一下对方的昵称吗？</h4>
					<input type="text" id="set-friend-input" maxlength="20" />
					<a href="#" class="btn btn-large" id="set-friend-button">设置</a>
				</div>
				<div id="media-menu">
					<input type="file" name="image_file" id="image_file" 
						accept="image/jpeg,image/png,image/jpg" />
					<div class="media-menu-row">
						<div id="media-gallery-wrapper" class="media-wrapper">
							<div id="media-gallery"></div>
							<div id="media-gallery-text" class="media-text">上传照片</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal" id="media-gallery-modal" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body-gallery">
						<img id = "image_temp" src = ""/>
						<div class="modal-bottom-gallery">
							<button class="btn btn-large" id="send-image">发送</button>
							<button class="btn btn-large" id="cancel-send-image"  data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<form id='form_send_image' name="form_send_image" style='display:none;'>
   			<input type='hidden' id='img_left' name='left' value='0'/>
   			<input type='hidden' id='img_top' name='top' value='0'/>
    		<input type='hidden' id='img_width' name='width' value='0'/>
    		<input type='hidden' id='img_height' name='height' value='0'/> 
		</form>
		<link href="${cpath}/js/jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
		<script src="${cpath}/js/jcrop/jquery.Jcrop.min.js"></script>
		<div class="modal" id = "reset-password-modal" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
						<h3 class="modal-title" id="reset-modal-title">重置密码</h3>
					</div>
					<div class="new-password-wrapper">
						<input type="password"
							class="new-password-field"
							placeholder="输入新密码" id="new-password-input" />
						<input type="password"
							class="new-password-field"
							placeholder="验证新密码" id="verify-password-input" />
					</div>
					<div id="modal-footer">
						<div id="modal-reset-password-button-wrapper">
							<a href="#" class="btn btn-large"
								id="modal-reset-button-button">重置</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal" id="edit-username-modal" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
						<h4 class="modal-title" id="edit-username-title">编辑用户名</h4>
					</div>
					<div class="modal-body">
						<div id="edit-username-wrapper">
							<div id="edit-username-prefix">@</div>
							<input type="text" maxlength="16" value="${userInfo.userName}" placeholder="编辑用户名" id="edit-username-input" />
						</div>
						<div id="edit-user-error"></div>
						<div id="edit-username-message">
							您的用户名是唯一的，任何人都可以通过用户名在FreeChat上找到您!
						</div>
					</div>
					<div class="modal-footer">
						<div id="edit-username-btn-wrapper" class="btn btn-default">
							<div id="edit-username-sure">确定</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal" id = "create-account-modal" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div id="create-account-modal-body">
						<div class="modal-header">
							<h3 class="modal-title" id="create-modal-title">创建免费账户</h3>
						</div>
						<div id="close-create-modal-wrapper">
							<a id="close-create-modal" data-dismiss="modal">x</a>
						</div>
						<div class="control-group">
							<input type="text" 
								class="create_email modal-field-chatpage email create-event" 
								placeholder="输入邮箱" id="modal-email-chat" />
							<label for="modal-email-chat" class="create-field-icon glyphicon fui-mail-16"></label>
						</div>
						<div class="control-group">
							<input type="password" class="create_pass modal-field-chatpage create-event" 
								placeholder="密码" id = "modal-pass-chat"/>
							<label for="modal-pass-chat" class="create-field-icon fui-lock-16"></label>
						</div>
						<div id="modal-create-footer">
							<div id="modal-create-account-button-wrapper">
								<a href="#" class="btn btn-large" id="modal-create-account-button">创建</a>
							</div>
<!-- 							<div id="modal-login-option"> -->
<!-- 								<span id="modal-login-already">已经有账户了?</span> -->
<!-- 								<a href="#" id="login-option">登录</a> -->
<!-- 							</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="edit-avatar-modal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body-avatar">
						<div id="edit-avatar-close">
							<span id="edit-avatar-close-span">x</span>
						</div>
						<div id="edit-avatar-top" class="clearfix">
							<div id="edit-color-header-div">
								<span id="edit-color-header" class="active_avatar_header">颜色</span>
							</div>
							<div id="edit-icon-header-div">
								<span id="edit-icon-header">头像</span>
							</div>
						</div>
						<div id="edit-avatar-bottom" class="clearfix">
							<div id="edit-avatar-left">
								<c:forEach items="${allAvatarColors}" var="color">
									<div class="edit-color-div" id="color${color.colorId}">
										<c:if test="${userInfo.avatarColor == color.avatarColorName}">
											<div class="edit-color-checkmark"></div>
										</c:if>
										<div class="edit-color avatar-sprite sprite-Avatar-Base-${color.avatarColorName}-72_2x"></div>
										<div class="edit-color-title" style="color: ${color.avatarColor}">${color.avatarColorName}</div>
									</div>
								</c:forEach>
								<!-- <div class="edit-color-div" id="color1">
									<div class="edit-color-checkmark"></div>
									<div class="edit-color avatar-sprite sprite-Avatar-Base-Blue-72_2x"></div>
									<div class="edit-color-title" style="color: #468DE0">Blue</div>
								 -->
							</div>
							<div id="edit-avatar-right">
								<c:forEach items="${allAvatarIcons}" var="icon">
									<div class="edit-icon-div" id="icon${icon.iconId}">
										<div class="edit-icon-color avatar-sprite sprite-Avatar-Base-${userInfo.avatarIcon == icon.avatarIcon ? userInfo.avatarColor : 'Grey'}-72_2x"></div>
										<div class="edit-icon avatar-sprite sprite-Avatar-Icon-${icon.avatarIcon}-72_2x"></div>
										<div class="edit-icon-title">${icon.avatarIconName}</div>
									</div>
								</c:forEach>
								<!-- <div class="edit-icon-div" id="icon1">
									<div class="edit-icon-color avatar-sprite sprite-Avatar-Base-Grey-72_2x"></div>
									<div class="edit-icon avatar-sprite sprite-Avatar-Icon-Icecream-72_2x"></div>
									<div class="edit-icon-title">Ice Cream</div>
								 -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>	
	</div>
</body>
</html>